<script setup lang="ts">
import { businessEnterApplyDetailsApi } from '@/api/merchantManagement'
import { ElImage } from 'element-plus'
import {
  CompanyTypeDict,
  AuditStateDict,
  LicenseValidityTypeDict,
  LegalCertValidityTypeDict,
  CardTypeDict,
  FinancialTypeDict
} from '@/utils/dict'
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})

const getDetail = async () => {
  console.log(props.id)
  const res = await businessEnterApplyDetailsApi(props.id)
  console.log(res)
  detail.value = res.data
}
getDetail()
console.log(detail.value)
</script>

<template>
  <div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>商家简称：</span>
        <span>{{ detail.businessShortName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>申请编号：</span>
        <span>{{ detail.applyNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>类型：</span>
        <span>{{ CompanyTypeDict[detail.companyType] }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>结算类型：</span>
        <span>{{ FinancialTypeDict[detail.financialAccountType] }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>申请时间：</span>
        <span>{{ detail.applyTime }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>状态：</span>
        <span>{{ AuditStateDict[detail.auditState] }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">经营信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>商家名称：</span>
        <span>{{ detail.businessName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <div>商家logo：</div>
        <ElImage
          v-if="detail.logo"
          :src="detail.logo"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.logo]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>公司类型：</span>
        <span>{{ CompanyTypeDict[detail.companyType] }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>所属行业：</span>
        <span>{{ detail.mccName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>成立时间：</span>
        <span>{{ detail.foundDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册资本：</span>
        <span>{{ detail.regCapital }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营范围：</span>
        <span>{{ detail.businessScope }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照编号：</span>
        <span>{{ detail.licenseCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期：</span>
        <span>{{ LicenseValidityTypeDict[detail.licenseValidityType] }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期开始日期：</span>
        <span>{{ detail.licenseBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期截止日期：</span>
        <span>{{ detail.licenseEndDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>营业执照图片：</div>
        <ElImage
          v-if="detail.licensePicUrl"
          :src="detail.licensePicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.licensePicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <span>客服电话：</span>
        <span>{{ detail.customerMobile }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册地址：</span>
        <span>{{ detail.regProvinceName }}{{ detail.regCityName }}{{ detail.regCountyName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>注册详细地址：</span>
        <span>{{ detail.regAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>经营地址：</span>
        <span>
          {{ detail.businessProvinceName }}
          {{ detail.businessCityName }}
          {{ detail.businessCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营详细地址：</span>
        <span>{{ detail.businessAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-门头照：</div>
        <ElImage
          v-if="detail.storeHeaderPicUrl"
          :src="detail.storeHeaderPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.storeHeaderPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>线下经营-内景照：</div>
        <ElImage
          v-if="detail.storeIndoorPicUrl"
          :src="detail.storeIndoorPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.storeIndoorPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-收银台：</div>
        <ElImage
          v-if="detail.storeCashierDeskPicUrl"
          :src="detail.storeCashierDeskPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.storeCashierDeskPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex-[50%] px-2"></div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">法人/联系人信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人姓名：</span>
        <span>{{ detail.legalName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件类型：</span>
        <span>{{ detail.legalCertType }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件号：</span>
        <span>{{ detail.legalCertNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期：</span>
        <span>{{ LegalCertValidityTypeDict[detail.legalCertValidityType] }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期开始日期：</span>
        <span>{{ detail.legalCertBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期截止日期：</span>
        <span>{{ detail.legalCertEndDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人手机号：</span>
        <span>{{ detail.legalMobileNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人身份证地址：</span>
        <span>{{ detail.legalAddr }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>法人身份证人像面：</div>
        <ElImage
          v-if="detail.legalCertFrontPicUrl"
          :src="detail.legalCertFrontPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.legalCertFrontPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>法人身份证国徽面：</div>
        <ElImage
          v-if="detail.legalCertBackPicUrl"
          :src="detail.legalCertBackPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.legalCertBackPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人姓名：</span>
        <span>{{ detail.contactName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>联系人手机号：</span>
        <span>{{ detail.contactMobileNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人邮箱：</span>
        <span>{{ detail.contactEmail }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>联系人身份证：</span>
        <span>{{ detail.contactCertNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>系统管理员：</span>
        <span>{{ detail.mobile }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">结算信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>账户类型：</span>
        <span>{{ CardTypeDict[detail.cardType] }}</span>
      </div>
      <div v-if="detail.cardType === 0" class="flex flex-[50%] px-2">
        <div>开户许可证：</div>
        <ElImage
          v-if="detail.regAcctPicUrl"
          :src="detail.regAcctPicUrl"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.regAcctPicUrl]"
          preview-teleported
        />
      </div>
      <div v-if="detail.cardType === 1 || detail.cardType === 2" class="flex flex-[50%] px-2">
        <span>账户名称：</span>
        <span>{{ detail.cardName }}</span>
      </div>
    </div>
    <div v-if="detail.cardType === 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>开户许可证核准号：</span>
        <span>{{ detail.openLicenceNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>账户名称：</span>
        <span>{{ detail.cardName }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行账号：</span>
        <span>{{ detail.cardNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>开户银行：{{ detail.bankName }}</span>
        <span></span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行卡所在地：</span>
        <span>
          {{ detail.bankProvinceName }}
          {{ detail.bankCityName }}
          {{ detail.bankCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>银行编码：</span>
        <span>{{ detail.bankCode }}</span>
      </div>
    </div>
    <div v-if="detail.cardType === 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>支行联行号：</span>
        <span>{{ detail.branchCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <template v-if="detail.cardType === 1 || detail.cardType === 2">
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件类型：</span>
          <span>{{ detail.certType }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件号码：{{ detail.certNo }}</span>
          <span></span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期：</span>
          <span>{{ LegalCertValidityTypeDict[detail.certValidityType] }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期开始日期：</span>
          <span>{{ detail.certBeginDate }}</span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期截止日期：</span>
          <span>{{ detail.certEndDate }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>银行卡正面：</span>
          <ElImage
            v-if="detail.settleCardFrontPicUrl"
            :src="detail.settleCardFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.settleCardFrontPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证人像面：</span>
          <ElImage
            v-if="detail.settleCertFrontPicUrl"
            :src="detail.settleCertFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.settleCertFrontPicUrl]"
            preview-teleported
          />
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证国徽面：</span>
          <ElImage
            v-if="detail.settleCertBackPicUrl"
            :src="detail.settleCertBackPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.settleCertBackPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>银行卡绑定手机号：</span>
          <span>{{ detail.mp }}</span>
        </div>
        <div class="flex flex-[50%] px-2"></div>
      </div>
    </template>
  </div>
  <div class="mb-20">
    <div class="font-bold py-2">系统管理员信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>系统管理员手机号：</span>
        <span>{{ detail.mobile }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
  </div>
</template>
